<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <ol class="breadcrumb">
        <li><a href="#">学生成绩管理系统</a></li>
        <li><a href="#">成绩查询</a></li>
        <li>修改成绩</li>
    </ol>
    <h3 class="page-header">修改成绩</h3>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2">学生学号:</label>
            <div class="col-sm-8">
                <span v-text="score.sno"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2">课程号:</label>
            <div class="col-sm-8">
                <span v-text="score.cno"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2">成绩:</label>
            <div class="col-sm-8">
                <input type="text" placeholder="请输入成绩" class="form-control" v-model="score.score">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-8 col-sm-offset-2">
                <input type="button" value="修改" class="btn btn-success" @click="updateScore">
                <input type="reset" value="重置" class="btn btn-danger">
            </div>
        </div>
    </form>
</div>
<script src="js/vue/vue2.5.js"></script>
<script src="js/vue/axios.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/param.js"></script>
<script>
    new Vue({
        el:'.container',
        data:{
            score:{
                scId:'',
                sno:'',
                cno:'',
                score:''
            }
        },
        methods:{
            //修改成绩
            updateScore(){
                //验证表单逻辑
                if(!this.checkForm()) return;

                //向服务器发出ajax请求 增加部门
                axios.get('/score/update',{params:{score:this.score.score,scId:this.score.scId}})
                    .then(resp =>{
                        layer.msg('部门修改成功！');
                        setTimeout(()=>{
                            location.href='QueryScore.html';
                        },500);
                    })
            },
            //表单验证
            checkForm() {
                //验证学生学号
                let r = /^.{3}$/;
                if(!r.test(this.score.sno)) {
                    layer.alert('学号必须为三位！如：001');
                    return false;
                }
                //验证课程号
                r = /^.{3}$/;
                if(!r.test(this.score.cno)) {
                    layer.alert('课程号必须为三位！如：001');
                    return false;
                }
                //验证成绩
                r = /^([0-9]|[1-9][0-9]|100)$/;
                if(!r.test(this.score.score)) {
                    layer.alert('成绩的范围必须为0~100！');
                    return false;
                }
                return true;
            },
            //根据学生学号查询
            getScore(){
                axios.get('/score/get',{params:{scId:this.score.scId}})
                    .then(resp=>{
                        this.score = resp.data;
                    })
            }
        },
        mounted(){
            this.score.scId = getParam('scId');
            this.getScore();
        }

    });
</script>
</body>
</html>